<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<title>矿山救护远程调度管理指挥系统</title>
	<link href="../../css/style.css" rel="stylesheet" type="text/css">
	<link href="../../css/table.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&zh-CN"></script>
	<script src="keydragzoom.js" type="text/javascript"></script>
<script type="text/javascript">
var map;
var infowindow;
var nonxueyuanLatlng = new google.maps.LatLng(40.093339,116.309631);
var ufidaLatlng = new google.maps.LatLng(40.090417,116.309248);
var hualianLatlng = new google.maps.LatLng(40.093963,116.33729);
var bounds;
function init() {
  var mapOptions = {
    zoom: 13,
    center: new google.maps.LatLng(40.072653,116.303365),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDoubleClickZoom : true
  }
  map = new google.maps.Map(document.getElementById("map"), mapOptions);
  map.enableKeyDragZoom({
      key: "shift",
      boxStyle: {
          border: "1px dashed black",
          backgroundColor: "transparent",
          opacity: 1
      },
      veilStyle: {
          backgroundColor: "gray",
          opacity: 0.1
      },
      visualEnabled: true,
      visualPosition: google.maps.ControlPosition.LEFT,
      visualPositionOffset: new google.maps.Size(12, 0),
      visualPositionIndex: null,
      visualSprite: "http://www.mzwu.com/pic/201105/dragzoom_btn.png",
      visualSize: new google.maps.Size(20, 20),
      visualTips: {
          off: "开启电子围栏",
          on: "禁止电子围栏"
      }
  });  

  bounds = new google.maps.LatLngBounds(map.getCenter(),map.getCenter())
  var rectangle = new google.maps.Rectangle({
    map : map,
    bounds : bounds,
    strokeColor : "black",
    strokeWeight : "1",
    strokeOpacity : 1,
    fillColor : "#E6ECEA",
    fillOpacity : 0.5
  });
  
  var dz = map.getDragZoomObject();
  google.maps.event.addListener(dz, 'dragend', function (bnds) {
	  rectangle.setBounds(bnds);
      if(bnds.contains(hualianLatlng)){
    	  log(bnds);
      }
  });    
  initMakers();

  google.maps.event.addListener(map, 'click', function() {
	  if(!bounds.equals(rectangle.getBounds())){
		  rectangle.setBounds(bounds);
	  }
  });
}

function initMakers(){
  var marker1 = new google.maps.Marker({
	  position: nonxueyuanLatlng, 
	  map: map, 
	  title:"北京农学院"
  });   
  var marker2 = new google.maps.Marker({
	  position: ufidaLatlng, 
	  map: map, 
	  title:"华北电力大学"
  });   
  var marker3 = new google.maps.Marker({
	  position: hualianLatlng, 
	  map: map, 
	  title:"华联超市"
  });   

  google.maps.event.addListener(marker3, "click", function() {
      if (infowindow) infowindow.close();
      infowindow = new google.maps.InfoWindow({content: "<table border=1 bordercolor='red'><tr><td>aaaaaaaa</td><td>bbbbbbbb</td></tr><tr><td>cccccccc</td><td>dddddddd</td></tr></table>"});
      infowindow.open(map, marker3);
  });

  google.maps.event.addListener(map, 'click', function() {
	  if (infowindow) infowindow.close();
  });
}

function log(message){
	var textPane = document.getElementById("textpane");
	textPane.innerHTML= textPane.innerHTML +"</BR>" + message;
}

function search(retBounds){
	
}
</script>
<body rightmargin="0" bottommargin="0" leftmargin="0" topmargin="0" onload="init()" style="background: #ffffff;">
<table width="100%" height="100%"  border="0" align="center" cellpadding="0" cellspacing="0" style="table-layout: fixed;">
	<!-- 位置导航栏 -->
	<tr height="25px">
		<td width="100%" align="center" valign="top">
			 <table width="98%" border="0" cellpadding="0" cellspacing="0" class="tabtitle">
              <tr>
                <td width="4%" valign="top"><img src="../../img/pic_dot1.gif" width="37" height="22"></td>
                <td width="96%" valign="middle">当前位置：<a  class="n">救援决策支持</a> &gt;&gt; <a  class="n">远程调度预案管理</a></td>
              </tr>
            </table>
		</td>
	</tr>
   
   
   <!-- 空格 -->
   <tr height="3px">
		<td>
			&nbsp;
		</td>
   </tr>
</table>
 <div id="map" style="width:1005px;height:425px;border:0px;"></div>
 <span id="textpane">对对对对对对对对对对对对</span>
</body>
</html>
